<template>
  <div class="home">
    <van-nav-bar title="试题选集" :style="rgba[0]" />
    <van-search
      v-model="value"
      shape="round"
      background="#fff"
      placeholder="请输入搜索关键词"
      @click="sear"
    />
    <van-swipe :autoplay="3000" class="sipeoen" indicator-color="#1989fa">
      <van-swipe-item v-for="(image, index) in swidata.swipe_img_list" :key="index">
        <van-image width="100%" height="150" lazy-load :src="image.url" />
      </van-swipe-item>
    </van-swipe>
    <div class="titles">科目选择</div>
    <div class="swiper_background">
      <swiper class="swiper" :options="swiperOption">
        <swiper-slide v-for="(item,i) of datas.subject_list" :key="i">
          <van-image
            width="50"
            height="100"
            lazy-load
            :src="item.cover"
            @click="fnck(item.quiz_list_id)"
          />
          <p class="p_title" @click="fnck(item.quiz_list_id)">{{item.name}}</p>
        </swiper-slide>
      </swiper>
    </div>
    <van-tabs v-model="active" animated :title-active-color="rgba[2]" color="#fff">
      <van-tab v-for="(items,j) of tabs" :title="items" :key="j">
        <tabs :num="j"></tabs>
      </van-tab>
    </van-tabs>
    <tab-bar></tab-bar>
    <div style="height:50px;width:100%;background-color:#fff"></div>
  </div>
</template>

<script>
//试题首页
import { getSubject, getAnswerUser } from "@/request/API/subject.js";
import tabs from "./components/tabs";
import Vue from "vue";
import { Lazyload } from "vant";

Vue.use(Lazyload);
export default {
  name: "home",
  components: {
    tabs
  },
  data() {
    return {
      value: "",
      active: 0,
      datas: {},
      swidata: {},
      tabs: ["推荐试题", "热门试题", "最新试题"],
      rgba: [],
      rgb: [],
      swiperOption: {
        //轮播
        slidesPerView: 3,
        spaceBetween: 30,
        pagination: {
          el: ".swiper-pagination",
          clickable: true
        }
      }
    };
  },
  async created() {
    await this.API_getSubject();
    await this.API_getAnswerUser();
    this.bakcrgba();
  },
  methods: {
    async API_getSubject() {
      let res = await getSubject();
      if (res.status === 200) {
        this.datas = res.data;
        this.$store.commit("apiDataModules/GETAPIDATA", this.datas);
        // console.log(res.data);
        localStorage.setItem("datas", JSON.stringify(this.datas));
      }
    },
    async API_getAnswerUser() {
      let res = await getAnswerUser();
      if (res.status === 200) {
        this.swidata = res.data;
        this.$store.commit("apiDataModules/GETANUSER", this.swidata);
        // console.log(res.data);
        localStorage.setItem("swidata", JSON.stringify(this.swidata));
      }
    },
    rgbas() {
      this.rgb.push("background-color: #1989fa");
      this.rgb.push("#646566");
      this.rgb.push("#4199f0");
      localStorage.setItem("bakcColor", JSON.stringify(this.rgb));
    },
    sear() {
      this.$router.push({ path: "/search" });
    },
    bakcrgba() {
      //主题颜色
      let rgb = JSON.parse(localStorage.getItem("bakcColor"));
      let user = this.$store.state.apiDataModules.token;
      if (!user) {
        //清除登陆设置
        localStorage.removeItem("fontdatas");
        localStorage.removeItem("bakcColor");
        this.rgbas(); //消除异步数据没有添加成功的影响
      }
      if (rgb == null) {
        this.rgb.push("background-color: #1989fa");
        this.rgb.push("#646566");
        this.rgb.push("#1989fa");
        localStorage.setItem("bakcColor", JSON.stringify(this.rgb));
      } else {
        this.rgba = JSON.parse(localStorage.getItem("bakcColor"));
      }
    },
    fnck(arrId) {
      this.$router.push({ path: "/choice", query: { arrId: arrId } });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/style/home/home.scss";
</style>